import React, {useState, useEffect} from 'react';
import { Result, Icon, NavBar ,Modal, Toast} from 'antd-mobile';
import {withRouter} from 'react-router-dom'
import wxpay from "@/assets/svg/wxpay.svg"
import prePay from "@/assets/svg/prePay.svg"

import "./result.scss"

const confirm = Modal.alert;
/**
 * 支付成功的结果页
 * @param props
 * @constructor
 */
function SuccessPay(props) {
    console.log("props--->", props);
    let [message, setMessage] = useState(() => {
        return (<div>998.00元 <del>1098元</del></div>)
    });

    function back(){
        if(props.location.query.call){
            props.location.query.call();
        }else {
            props.history.goBack();
        }
    }

    useEffect(()=>{
       if(!!props.location.query){
           setMessage((<div>{props.location.query.message}</div>));
       }
    }, []);
    const myImg = src => <img src={src} className="spe am-icon am-icon-md" alt="" />;
    const ResultExample = () => (<div className="result-example">
        <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={back}
        > 支付结果</NavBar>
        <Result
            buttonText={"确定"}
            img={myImg(prePay)}
            title="支付成功"
            message={message}
            buttonType="primary"
            onButtonClick={back}
        />
    </div>);
    return (ResultExample());
}

export default withRouter(SuccessPay);